<!--  -->
<template>
    <div>文件上传
        {{ formData }}
        <el-upload class="avatar-uploader" :action="uploadUrl" :headers="headers" :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="formData.certificate" :src="imageBaseUrl + formData.certificate" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
                <Plus />
            </el-icon>
        </el-upload>

        <!-- {{ fileList }} -->
        <el-upload v-model:file-list="fileList" class="upload-demo" :action="uploadUrl" list-type="picture">
            <el-button type="primary">Click to upload</el-button>
            <template #tip>
                <div class="el-upload__tip">
                    jpg/png files with a size less than 500kb
                </div>
            </template>
        </el-upload>

        <el-button type="primary" @click="submit">提交</el-button>
    </div>
</template>

<script lang='ts' setup>
import { UploadProps, UploadUserFile } from 'element-plus';
import { reactive, toRefs, ref, onMounted } from 'vue'
const uploadUrl = import.meta.env.VITE_API_BASE_URL + '/api/upload/add'

const imageBaseUrl = ref(import.meta.env.VITE_IMG_BASE_URL);
import { Plus } from '@element-plus/icons-vue'

const formData = reactive({
    "name": "阿斯达大厦",
    "province": "河北",
    "city": "石家庄市",
    "address": "天津",
    "telephone": null,
    "startTime": null,
    "legalPerson": null,
    "mobile": null,
    "creditCode": null,
    "license": 0,
    "medicalPoint": 0,
    "house": null,
    "certificate": "",
    "picture": "",
    "adminUserName": "enci",
    "adminPwd": "enci",
    "adminName": "enci",
    "adminMobile": "15931335505"
})

const headers = reactive({
    //   Authorization: localStorage.getItem('token')
})
// const imageUrl = ref('')
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {


    formData.certificate = response.data.url;

}

const fileList = ref<any[]>([

    {
        name: "upload/2025/6/25/20250625165208091.jpg",
        fileName: "upload/2025/6/25/20250625165208091.jpg",
        url: imageBaseUrl.value + "upload/2025/6/25/20250625165208091.jpg"
    }
])

//表单提交
const submit = () => {

    //   let files=  fileList.value.map((item)=>{

    //        if(item?.response?.data?.url){
    //         return item.response.data.url
    //        }
    //        else{
    //          return item.fileName
    //        }

    //     })

    // let files=  fileList.value.map((item)=>item?.response?.data?.url ? item.response.data.url:item.fileName )
    let files = fileList.value.map((item) => item?.response?.data?.url || item.fileName)
    console.log(files);
    if (files.length > 0) {
        formData.picture = files.toString();
    }
    else {

        formData.picture = "";
    }

}

</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.avatar {
    width: 178px;
    height: 178px;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>